<template>
	<view class="pb-30">
		<view class="list-container bg-f mg-30 px-20">
			<view class="list-item list-border-top-e flex--center py-20" @click="handleChangeAvatar">
				<view>头像</view>
				<view class="flex-1 flex-end">
					<view class="flex--center">
						<image class="avatar-image"
							:src="staffInfo.avatar ? $util.addDomain(staffInfo.avatar) : '/static/default-avatar.png'">
						</image>
						<uv-icon name="arrow-right" color="#626262" size="22rpx"></uv-icon>
					</view>
				</view>
			</view>

			<view class="list-item list-border-top-e flex--center">
				<view>账号</view>
				<view class="flex-1 text-right">{{ staffInfo.userName }}</view>
			</view>

			<view class="list-item list-border-top-e flex--center">
				<view>角色</view>
				<vieew class="flex-1 text-right">
					<text v-if="staffRole === 'shengchan'">生产</text>
					<text v-if="staffRole === 'wuliu'">物流</text>
				</vieew>
			</view>

	<!-- 		<view class="list-item list-border-top-e flex--center"
				v-if="roleType === 'staff' && staffRole === 'shengchan'">
				<view>所属小组</view>
				<view class="flex-1 text-right">{{ groupNames }}</view>
			</view> -->

			<view class="list-item list-border-top-e flex--center"
				v-if="roleType === 'staff' && staffRole === 'shengchan'">
				<view>所属工序</view>
				<view class="flex-1 text-right">{{ productionProcessName }}</view>
			</view>
		</view>

		<view class="button-wrap mx-30">
			<button class="button-item uv-reset-button bg-f color-primary radius-10 flex-center-center fw-700"
				@click="handleLogout">退出登录</button>
			<button class="button-item uv-reset-button bg-primary color-f radius-10 flex-center-center fw-700"
				@click="$util.navTo('pwd')">修改密码</button>
		</view>
	</view>
</template>

<script>
	import {
		changeAvatar
	} from '@/common/uploadFile.js'

	export default {
		data() {
			return {
				groupNames: '',
				// 所属工序文字
				productionProcessName: '',
			}
		},
		onShow() {
			this.funGetStaffInfo()
		},
		methods: {
			async funGetStaffInfo() {
				const result = await this.$api.getStaffInfo()
				const staffRole = result.roles[0]
				if (staffRole !== 'shengchan' && staffRole !== 'wuliu') {
					uni.showToast({
						title: '没有权限，请联系平台',
						icon: 'none'
					})
					this.$store.dispatch('LogOut')
					uni.redirectTo({
						url: '/pages/login/role'
					})
					return
				}

				this.$store.commit('SET_STAFF_ROLE', staffRole)
				this.$store.commit('SET_STAFF_INFO', result.user)
				this.funGetGroup()

				if (staffRole === 'shengchan') {
					this.funGetProductionProcess()
				}
			},
			async funGetGroup() {
				const result = await this.$api.postStaffGroup()
				if (result.data.groupNames) {
					this.groupNames = result.data.groupNames.join(',')
				}
			},
			async funGetProductionProcess() {
				// 获取某字典类型下的所有数据
				// self_production_process=生产工序
				this.$api.getDictTypeData('self_production_process').then((result) => {
					let ulsit = this.staffInfo.processFlag.split(',')
					this.productionProcessName = result.data.filter(item=>{
						if(ulsit.find(value => value == item.dictValue)){
							return item
						}
					}).map(item=>{return item.dictLabel})
					// const info = result.data.find((item) => item.dictValue === this.staffInfo
					// 	.productionProcess)
					// if (info) {
					// 	this.productionProcessName = info.dictLabel
					// }
				})
			},

			// 修改头像
			handleChangeAvatar() {
				uni.chooseMedia({
					count: 1, // 最多可以选择的文件个数, 默认 9（注意：ios不可大于9）
					mediaType: ['image'], // 文件类型 image=只能拍摄图片或从相册选择图片, video=只能拍摄视频或从相册选择视频, mix=可同时选择图片和视频
					sourceType: ['album', 'camera'], // 图片和视频选择的来源 album=从相册选择, camera=使用相机拍摄
					sizeType: ['original', 'compressed'], // 仅对 mediaType 为 image 时有效，是否压缩所选文件
					// maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持60秒。
					success: async (chooseResult) => {
						uni.showLoading({
							mask: true
						})
						const uploadResult = await changeAvatar({
							tempFilePath: chooseResult.tempFiles[0].tempFilePath
						})
						uni.hideLoading()
						this.funGetStaffInfo()
					},
					fail: (error) => {
						console.log(error)
						if (error.errMsg !== 'chooseMedia:fail cancel') {
							uni.showToast({
								title: error.errMsg,
								icon: 'none'
							})
						}
					},
				})
			},
			// 退出登录
			handleLogout() {
				uni.showLoading({
					title: '安全退出中..',
					mask: true
				})
				setTimeout(()=>{
					uni.reLaunch({
						url: '/pages/login/role'
					})
					this.$store.dispatch('LogOut')
				},800)
				
			},
		},
	}
</script>

<style lang="scss" scoped>
	.list-container {
		border-radius: 14rpx;
	}

	.list-item {
		min-height: 110rpx;
	}

	.avatar-image {
		width: 98rpx;
		height: 98rpx;
		border-radius: 999rpx;
		margin-right: 10rpx;
	}

	.button-wrap {
		margin-top: 53rpx;
	}

	.button-item {
		margin-top: 31rpx;
		height: 80rpx;
	}
</style>